<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YZH</title>
    <style>
        td {
            width: 200px;
            text-align: center;
            padding: 10px 30px;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
            border-bottom: 1px solid #000;
            border-right: 1px solid #000;
            
        } 
        table {
            border-collapse: collapse;
            border-spacing: 0px;
        }
        p {
            /* 字体颜色,大小 */
            color: #00ff00;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 注释 ctrl + / -->

    <!-- <strong>变粗</strong>
    <em>倾           斜</em>    多个空格会视为一个 
    <i>倾斜</i>
    <del>删除</del>
    <s>删除</s>
    <ins>下划线</ins>
    <u>下划线</u> -->
    <!-- #region 上述标签不独占一行-->

    <!--lorem是随机生成一段文字方便测试-->
    <!-- <p>这是段落标签</p>  
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing<br>
         elit. Quisquam cumque provident praesentium ab ea eos distinctio ipsum a nisi, quas <br>
        maxime at dolore, voluptate, exercitationem aliquam corporis! Doloribus, odio officia?
    </p> -->
    
    <!-- #region 图片 -->
    <!-- #region 
        src必填,描述了该图片的路径,
        可以是相对路径(当前工作目录为基准,可以当前目录可以上层(..\)可以下层)
        可以是绝对路径(本地绝对路径)
        可以是网络路径(网址)
    -->
    <!-- <img src="何雨.jpg">
    <img src="D:\VSCode2019\web\code\何雨.jpg">
    <img src="http://img.mm4000.com/file/0/5d/be118211b8.jpg"> -->
    <!-- #region alt属性
    照片在打开失败(挂了)的时候显示的文本
    -->
    <!-- <img alt="这是一个小姐姐" src="http://img.mm4000.com/file/0/5d/be118211b8.jpg"> -->
    <!-- #region title属性
    鼠标在悬停在图片上的时候会给一个提示
    --> 
    <!-- <img title = "小姐姐" src="http://img.mm4000.com/file/0/5d/be118211b8.jpg"> -->
    <!-- #region 设置尺寸 width/height px像素
        宽度和高度可以同时设置
        可以只设置一个,另外一个同比例缩放
    -->
    <!-- <img width="90px" title = "小姐姐" src="http://img.mm4000.com/file/0/5d/be118211b8.jpg"> -->

    <!-- #region 超连接 a   herf:目的地址(网址/IP地址),target:打开一个新的标签页
    连接link(快捷方式)
    超:连接跳转到页面以外-->
    <!-- <a href="https://www.baidu.com">百度</a>
    <a href="https://www.sougou.com" target="_blank">搜狗</a> -->


    <!-- #region 表格标签
    table表示整个表格
    tr表示一行
    th表示表头中的一个单元格
    td表示一个单元格
    -->

    <!-- <table>
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>YZH</td>
            <td>123</td>
        </tr>
        <tr>
            <td>HY</td>
            <td>321</td>
        </tr>
    </table> -->


    <!-- #region 列表标签
    有序列表 ol (ordered list)
    无需标签 ul (unordered list)

    列表项 li list (item)-->
    <!-- <ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    </ol>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul> -->



    <!-- #region form标签,前后端交互
    把页面上用户进行的操作/输入提交到服务器上-->



    <!-- #region input标签,表现各种用户用来输入的组件
name 属性规定 <input> 元素的名称。

name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。

注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
    text 单行文本框
    password 单行文本框,用来输入密码(会隐藏)
    radio 选择
    checkbox 勾选 checked属性默认选中
    button 按钮 value属性设置按钮内部显示
    submit 交互按钮 外表和button差不多,会触发form和服务器交互
    file 文本选择框
    -->

    <!-- <br><br>
    <input type="text">
    <br>
    <input type="password">
    <input type="radio" name="nv"> 男
    <p>Name: <input type="text" name="fullname" /></p>
    <input type="checkbox" checked> 吃饭
    <input type="button" value="按钮"> 
    <input type="submit" value="按钮2">
    <input type="file"> -->



    <!-- #region select下拉菜单,option元素,默认第一个元素-->
    <!-- <select>
        <option>北京</option>
        <option>上海</option>
        <option>成都</option>
    </select> -->



    <!-- #region textarea 多行编辑框-->
    <!-- <textarea id="story" name="story" rows="5" cols="33">
        It was a dark and stormy night...
    </textarea> -->

    



    <!-- #region div 无语义标签, 块级元素(独占一行)-->
    <!-- #region span 无语义标签, 行内元素-->
    <!-- <div>这是第一个div</div>
    <div>这是第二个div</div>

    <span>这是第一个span</span>
    <span>这是第二个span</span> -->


    <!-- #region style标签可以放在任意位置-->
    <p>杨子豪</p>

</body>
</html>